<script setup lang="ts">
// vue
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
// 组件
import comScrollView from '@/components/common/com-scrollView/com-scrollView.vue';
import comIcon from '@/components/common/com-icon/com-icon.vue';
import tabber from '../components/common/com-tabbar/com-tabbar.vue'
import comHomeList from '@/components/common/com-homeList/com-homeList.vue';
// 接口
import { getHomeKnowledgeTopicAPI, getHomeKnowledgeListAPI, postCollectAPI } from '@/api/healthEncyclopedia'
import type { TopicItem } from '@/types/healthEncyclopedia';
import type { rowss } from '@/types/types';
import { showToast } from 'vant';
// 路由
const router = useRouter()
// 获取健康饮食数据
let list = ref<TopicItem[]>()
const getHomeKnowledgeData = async () => {
  let res = await getHomeKnowledgeTopicAPI()
  list.value = res.data.data
}
getHomeKnowledgeData()
// 获取推荐列表数据
const recommendPage = ref<number>(1)
const recommendPageSize = ref<number>(10)
// 推荐列表控制请求
const recommendFlagEnd = ref<boolean>(false)
const recommendFlag = ref<boolean>(false)
// 获取关注列表数据
const followPage = ref<number>(1)
const followPpageSize = ref<number>(10)
// 关注列表控制请求
const followFlagEnd = ref<boolean>(false)
const followFlag = ref<boolean>(false)
// tabs选中下标
const active = ref<number>(0)
const recommendList = ref<rowss[]>([])
const followList = ref<rowss[]>([])
// 推荐
const getHomeKnowledgeRecommendData = async () => {
  let res = await getHomeKnowledgeListAPI(recommendPage.value, recommendPageSize.value, 'recommend')
  if (recommendPage.value === 1) {
    recommendList.value = res.data.data.rows
    // 第一次请求接口
    recommendFlag.value = true
  } else {
    recommendList.value.push(...res.data.data.rows)
    console.log(res.data.data, '推荐');
  }
  // 如果返回的数据小于pageSize就说明后面没有数据了
  if (res.data.data.rows.length < recommendPageSize.value) {
    recommendFlagEnd.value = true
  }
}
// 关注
const getHomeKnowledgeFollowData = async () => {
  let res = await getHomeKnowledgeListAPI(followPage.value, followPpageSize.value, "follow")
  // 第一次请求接口
  if (followPage.value === 1) {
    followList.value = res.data.data.rows
    followFlag.value = true
  } else {
    followList.value.push(...res.data.data.rows)
  }
  // 如果返回的数据小于pageSize就说明后面没有数据了
  if (res.data.data.rows.length < recommendPageSize.value) {
    followFlagEnd.value = true
  }
}
// 节流步骤
// 1. 第一次调用接口 recommend 接口时将 recommendFlag 改为true
// 2. 调用接口时判断 recommendFlag 是否为 true 如果为 true 使用 return 终止函数执行
watch(() => active.value, () => {
  if (active.value === 0) {
    if (recommendFlag.value) return
    getHomeKnowledgeRecommendData()
  } else {
    if (followFlag.value) return
    getHomeKnowledgeFollowData()
  }
}, {
  immediate: true
})


const scrollEnd = () => {
  if (active.value === 0) {
    // 如果返回数据小于pageSize就说明后面已经没有数据了就应该禁止函数调用
    if (recommendFlagEnd.value) return
    recommendPage.value++
    getHomeKnowledgeRecommendData()
  } else {
    if (followFlagEnd.value) return
    followPage.value++
    getHomeKnowledgeFollowData()
  }

}

// 跳转话题页
const goTopicDetail = (val: string) => {
  router.push(`/topicDetail/${val}`)
}
const onCollectFn = async (val: rowss) => {
  let res = await postCollectAPI('knowledge', val.id)
  if (res.data.code === 10000) {
    recommendList.value?.map(item => {
      if (item.id === val.id) {
        if (item.collectionFlag === 0) {
          item.collectionFlag = 1
          showToast({
            message: "收藏成功"
          })
        } else {
          item.collectionFlag = 0
          showToast({
            message: "取消收藏成功"
          })
        }
      }
    })


  }
}
</script>
<template>
  <comScrollView @onReachBottom="scrollEnd">
    <div class="fox">
      <header class="header">
        <div class="top-container">
          <div class="baike">健康百科</div>
          <div class="selectBox" @click="router.push('/search')">
            <comIcon class="searchIcon" name="icons-home-search" />
            疾病/症状/医生/健康知识
          </div>
        </div>
        <div class="hot-topics">
          <div class="hot-header">
            热门话题
          </div>
          <div class="topics-list">
            <div @click="goTopicDetail(item.id)" class="topics-item" v-for="item in list" :key="item.id">
              <img :src="item.imgUrl" alt="">
              <span>{{ item.topic }}</span>
            </div>
          </div>
        </div>
        <div class="tabs-list">
          <div class="tabs-header">
            <van-tabs line-width="14px" v-model:active="active">
              <van-tab title="推荐">
              </van-tab>
              <van-tab title="关注">
              </van-tab>
            </van-tabs>
          </div>
          <div v-show="active === 0" class="list">
            <comHomeList @onCollect="onCollectFn" :list="recommendList" />
            <div v-if="!recommendFlagEnd" class="adm-infinite-scroll">正在加载...</div>
            <div v-if="recommendFlagEnd" class="adm-infinite-scroll">没有更多了</div>
          </div>
          <div v-show="active === 1" class="list">
            <comHomeList :list="followList" />
            <div v-if="!followFlagEnd" class="adm-infinite-scroll">正在加载...</div>
            <div v-if="followFlagEnd" class="adm-infinite-scroll">没有更多了</div>
          </div>
        </div>
      </header>
      <div style="background-color: antiquewhite;">
        <tabber />
      </div>
    </div>
  </comScrollView>

</template>

<style lang="scss" scoped>
.fox {
  .header {
    background-color: #4fa4f3;
    overflow: hidden;

    .top-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 16px 0;
      margin-bottom: 20px;

      .baike {
        color: #fff;
        font-size: 20px;
      }

      .selectBox {
        display: flex;
        align-items: center;
        color: rgba($color: #fff, $alpha: 0.6);
        height: 22px;
        line-height: 22px;
        border-radius: 50px;
        text-indent: 8px;
        font-size: 16px;
        border: 1px solid hsla(0, 0%, 92.9%, .9);
        font-size: 13px;
        padding: 4px 15px 4px 8px;

        .searchIcon {
          width: 15px;
          height: 15px;
        }
      }
    }

    .hot-topics {
      padding: 24px 14px 0;
      background-color: #fff;
      border-radius: 20px 20px 0 0;
      border-bottom: 1px solid #f3f3f3;

      .hot-header {
        font-size: 16px;
        margin-bottom: 20px;
      }

      .topics-list {
        display: flex;
        flex-wrap: wrap;

        .topics-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-bottom: 20px;
          width: 86px;

          img {
            width: 45px;
            height: 45px;
          }

          span {
            margin-top: 10px;
            font-size: 12px;
          }
        }
      }
    }

    .tabs-list {
      background-color: #fff;
      padding: 11px 0;

      .tabs-header {
        width: 110px;

        .van-tabs__line {
          background-color: #2cb5a5;
        }
      }

      .list {
        padding-bottom: 50px;

        .adm-infinite-scroll {
          color: #A2A2A2;
          background-color: #FFFFFF;
          padding: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
